<template>
  <div class="namelist">
    <div class="home-banner">
    </div>
    <div class="measure">
      <div class="measure-name">
        <div>试卷选择</div>
        <div>
          <a-input :style="{ width: '220px', background: '#fff' }" placeholder="请输入试卷关键词"
            v-model="RefundReadForm.keyword">
            <template #prefix>
              <icon-search />
            </template> </a-input><span class="oval-search-button" @click="measurement">搜索</span>
        </div>
      </div>
    </div>
    <div class="measure-test">
      <div class="Loading" v-if="!docsaveData">
        <a-spin dot />
      </div>
      <!-- -->
      <div class="test-paper" v-for="(item, index) in docsaveData" :key="index">
        <p class="heightp">
          <img style="width: 12px; height: 12px" src="/img/bianzu.png" alt="" />
          &nbsp;
          <a-tooltip :content="item.SaveName">
            <span>{{ item.SaveName }}</span>
          </a-tooltip>
        </p>
        <div class="measureBtn">
          <span>12人测评过</span>
          <a-button class="start" size="mini" @click="starttesting(item)" type="primary">快测快评</a-button>
        </div>
      </div>
    </div>

    <div style="
        display: flex;
        justify-content: center;
        align-items: center;
        /* 假设父容器高度为视口高度 */
      " v-if="docsaveData">
      <a-space direction="vertical" :size="16" style="display: block; text-align: center">
        <a-row>
          <a-col :span="24">
            <!-- show-jumper -->
            <a-pagination v-if="windowwidth>768" :total="total" show-total show-page-size :current="RefundReadForm.page"
              :page-size="RefundReadForm.limit" @change="pageNumChange" @page-size-change="pageSizeChange" />
            <a-pagination v-if="windowwidth<=768" :total="total" show-page-size :current="RefundReadForm.page"
              :page-size="RefundReadForm.limit" @change="pageNumChange" @page-size-change="pageSizeChange" />
          </a-col>
        </a-row>
      </a-space>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import {
  postMyHomeworkdocsaveData,
  postMyHomeworksendDoc,
  postMyHomeworkstudent,
} from "../../api/measure";

import useUserStore from "@/store/modules/user";
import { Message } from "@arco-design/web-vue";
import { getPermission } from "@/utils/subject";

const userStore = useUserStore();
// import useUserStore from '@/store/modules/user/index';
const router = useRouter();
const subjectID = Number(userStore.$state.subjectID);
const idsub = ref(userStore.$state.subjectID);
const docsaveData = ref();
const total = ref();
const windowwidth = ref(window.innerWidth);
const RefundReadForm = reactive({
  subjectID: subjectID, // 学科id
  keyword: "", // 关键字
  page: 1, //页码
  limit: 12, //  显示条数
});
const ksendForm = reactive({
  subjectID: subjectID, // 学科id
  ids: "",
});
const studentctrID = reactive({
  ctrID: "",
});
const pageSizeChange = (pageSize: number) => {
  RefundReadForm.page = 1;
  RefundReadForm.limit = pageSize;
  // getPageData();
  getPageData();
};

// 分页切换
const pageNumChange = (page: number) => {
  if (page !== 0) {
    RefundReadForm.page = page;
    getPageData();
  }
};

const getPageData = () => {
  postMyHomeworkdocsaveData(RefundReadForm).then((res: any) => {
    total.value = res.count;
    docsaveData.value = res.list;
  });
};

const starttesting = (e: any) => {
  // router.push("/Measure/answerQuestions");

  // if (!getPermission(idsub.value)) {
  //   // 替换为你的实际权限ID
  //   // 没有权限时显示提示
  //   Message.warning("您没有权限访问此内容，请联系管理员");
  //   return;
  // }

  ksendForm.ids = e.SaveID;
  ksendForm.subjectID = Number(userStore.$state.subjectID);
  // 发送试卷
  postMyHomeworksendDoc(ksendForm).then((res: any) => {
    studentctrID.ctrID = res.list;
    ctrList(e.SaveName);
  });
};
const ctrList = (e: any) => {
  // 添加答题记录
  postMyHomeworkstudent(studentctrID).then((res: any) => {
    res.list.ctrID;
    // router.push("/Measure/answerQuestions");
    router.push({
      path: "/Measure/answerQuestions",
      query: {
        saveName: e,
        textId: res.list.recordID,
        ctrID: res.list.ctrID,
        type: 1,
      },
    });
  });
};
watch(
  () => userStore.$state.subjectID,
  async (newValue, oldValue) => {
    // console.log(`subjectID 发生变化：旧值 ${oldValue}，新值 ${newValue}`);
    try {
      RefundReadForm.subjectID = userStore.$state.subjectID;
      idsub.value = newValue;
      if (userStore.$state.subjectID) {
        await getPageData();
      }

      // docsaveData.value = data;
    } catch (error) {
      console.error("获取数据出错:", error);
    }
  },
  { immediate: true }
);
const measurement = () => {
  getPageData();
};
onMounted(() => { });
</script>
<style lang="less" scoped>
/* Banner横幅区域 */
.home-banner {
  width: 100%;
  height: 200px;
  background-color: #fff;
  background-image: url("/img/shanyaozhe.png");
  background-size: 100% 100%;
  border-radius: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.heightp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.namelist {
  background: #f7fbff;
  position: relative;
  width: 100%;
  height: 100%;
}

.measure-test {
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}

.measure-test>* {

  // flex-basis: calc(16.666% - 24px);
  box-sizing: border-box;
}

.measure {
  // width: 100%;
  height: 70px;
  background: #0075ff;
  border-radius: 8px;
  border-top: 1px solid #0075ff;
}

.measure-name {
  height: 70px;
  line-height: 70px;
  margin-top: 5px;
  padding: 0 24px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}

.oval-search-button {
  display: inline-block;
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  background-color: #1890ff;
  /* 按钮背景色，可根据需要修改 */
  color: #fff;
  /* 按钮文字颜色，可根据需要修改 */
  cursor: pointer;
}

.test-paper {
  width: calc(25% - 10px);
  margin: 0 5px;
  min-height: 15vh;
  padding: 20px;
  font-weight: 500;
  font-size: 16px;
  color: #03305c;
  margin-bottom: 15px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.start {
  float: right;
  cursor: pointer;
  text-align: right;
}

.measureBtn span{
  color: #8d8d8d;
  font-size: 13px;
}

// 分页
.pagination {
  width: 550px;
  height: 30px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  left: 30%;
}

.grid-dem {
  text-align: center;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .measure-name{
    font-size: 12px;
  }
  .test-paper {
    width: 268px;
    padding: 20px;
    font-weight: 500;
    font-size: 16px;
    color: #03305c;
    margin-bottom: 15px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }
}
</style>
